<template>
<div class="vue-box sbot" >
  <!-- ------- 内容部分 ------- -->
  <div class="c-panel">
    <el-form v-if="m" :inline="true">
      <sa-info name="序号" br>{{ m.id }}</sa-info>
      <sa-info name="参数名" :value="m.name" br></sa-info>
      <sa-info name="图标" br>
        <svg-icon :icon-class="m.icon"></svg-icon>
      </sa-info>
      <sa-info name="颜色" br>
        <el-color-picker v-model="m.color" />
      </sa-info>
      <sa-info name="识别码" :value="m.code" br></sa-info>
      <sa-info name="类别编码" :value="m.clazzCode" br></sa-info>
      <sa-info type="enum" name="类型" :jv="dims.PROP_TYPE" :value="m.type" br />
      <sa-info type="enum" name="值类型" :jv="dims.PROP_VAL_TYPE" :value="m.valType" br />

      <sa-info name="参数值" :value="m.val" :type="m.valType=='0'?'img':''" br />
      <sa-info name="默认值" :value="m.defaultVal" :type="m.valType=='0'?'img':''" br />

      <sa-info type="enum" name="启用状态" :jv="dims.YES_OR_NO" :value="m.status" br />
      <sa-info name="描述" br>{{ m.note }}</sa-info>
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  name: 'prop-info',
  props: {
    param: Object
  },
  data() {
    return {
      id: this.param.id,
      dims: this.param.dims,
      sa: sa,
      m: {}
    }
  },
  created: function () {
    sa.ajax('/prop/getById', {
      id: this.id
    }, function (res) {
      this.m = res.data;
    }.bind(this), {
      type: "get"
    });
  },
  methods: {}
}
</script>

<style scoped>
.c-panel>>>.c-title {
  margin-bottom: 20px;
}

.c-panel>>>.c-item .c-label {
  width: 150px;
}

.c-panel>>>.c-item .el-input {
  width: 300px;
}

/* 链接样式  */
/*.my-link{position: relative; top: -1px; margin-left: 0.5em;}*/
</style>
